Nuxt3 Service Side Rendering 환경으로 프론트앤드 개발 시작하기

이 문서는 샘플 코드를 활용하여 Nuxt3 기반의 SSR(Server Side Rendering) 방식 프론트엔드 개발을 시작하는 방법을 안내합니다. 내용은 크게 개발 환경 구성하기와 샘플 코드 구현하기 두 부분으로 나뉘어 있습니다.

'H:Dev+'와 직접적으로 관련되지 않은 Nuxt3나 Node.js 등의 기술적인 내용에 대해서는 각 공식 사이트 문서를 참고할 수 있도록 링크를 제공합니다.

개발 환경 구성하기

H:Dev+를 이용한 프론트엔드 개발 환경을 구성하기 위해서는 Node.js와 Nuxt3가 필요합니다.

Node.js 설치

Node.js는 Node.js 공식 사이트 의 다운로드 페이지에서 개발 환경에 맞게 설치할 수 있습니다.

본 예시에서는 Docker를 사용하였으며, Linux(WLS2 기반의 Windows) 환경에 Node.js v22.12.0(LTS)를 설치했습니다.

참고 사항

• Docker는 Node.js 패키지 관리자가 아닙니다.
• 시스템에 Docker가 설치되어 있는지 확인한 후, Docker 공식 문서 를 참고하여 설정하세요.
• 공식 Node.js Docker 이미지는 nodejs/docker-node에서 제공됩니다.

아래와 같이 Docker 이미지를 가져와 Node.js 버전을 확인할 수 있습니다.

# Node.js Docker 이미지를 가져옵니다.
docker pull node:22-alpine

# 환경에 올바른 Node.js 버전이 있는지 확인합니다.
docker run node:22-alpine node -v # `v22.12.0`이 출력되어야 합니다.

# 환경에 올바른 npm 버전이 있는지 확인합니다.
docker run node:22-alpine npm -v # `10.9.0`이 출력되어야 합니다.

샘플코드 구현하기

Node.js 설치가 완료되면 소스 코드를 클론합니다.

git clone https://github.com/zmania/HDevPlus-example.git

클론한 뒤 디렉터리 구조는 다음과 같습니다.

nuxt3
php
spring-boot
vue-dr
vue

이 중 nuxt3 디렉터리로 이동하여 npm install을 실행하면 필요한 Node 패키지가 설치되며, 이 과정에서 Nuxt3도 함께 설치됩니다.

설치 완료 후 nuxt3/.env 파일을 생성하고 다음 내용을 추가합니다.

NODE_TLS_REJECT_UNAUTHORIZED=0
SECURE_KEY=ee9d2d324e261c42e5372a20b19c85b5ac7db7908dce804c59c911c2ae6624e1
API_URL=https://api.hdevplus.com/request.js

• NODE_TLS_REJECT_UNAUTHORIZED: SSL 인증서 검증 여부를 설정합니다. 0이면 인증서 검증을 무시하고, 1이면 공인된 CA에서 발급받은 SSL 인증서를 검증합니다.
• SECURE_KEY: API 접속을 위한 키입니다. 위의 키는 데모용으로, H:Dev+ 관리자 콘솔의 System > Setting 메뉴에서 별도의 도메인 & IP 설정 없이 사용할 수 있습니다.
• API_URL: 호출할 API 주소를 지정합니다.

.env 파일에는 민감한 정보가 포함될 수 있으므로, Git이나 SVN 등의 버전 관리 시스템을 통해 외부로 유출되지 않도록 주의해야 합니다.

데모용 SECURE_KEY는 예고 없이 변경될 수 있습니다. 최신 키는 H:Dev+ 공식 사이트를 통해 확인하시기 바랍니다.

설정이 완료되면 브라우저에서 http://localhost:8086에 접속하여 샘플 페이지를 확인할 수 있습니다.

추후 본인만의 API를 사용하려면, H:Dev+에 가입한 뒤 콘솔의 System > Setting 메뉴에서 Secure key를 확인하여 .env 파일의 SECURE_KEY 값을 해당 키로 변경하십시오. 또한 Setting > Domain & IP 메뉴에서 본인의 IP와 사용할 도메인(http://localhost:8086)을 등록할 수 있습니다.

http://localhost:8086 도메인을 계속 사용하는 것은 보안에 취약할 수 있으므로 실제 사용 시에는 도메인을 설정하는 것을 권장합니다.

이후 nuxt3/components와 nuxt3/pages 디렉터리의 .vue 파일을 참고하여 페이지를 자유롭게 생성하고 수정할 수 있습니다.